<style lang="scss">
@import "./uv.scss";
.priceAdjustment {
  .p1757733431 {
    ::v-deep .uv-input {
      padding: 0 !important;
    }
  }
  .p1757742262 {
    ::v-deep .uv-form-item__body {
      padding: 0 !important;
    }
  }
}
</style>
<template>
  <div class="priceAdjustment">
    <div>
      <div style="height: 1px;background: #EFEFEF;width:100%"></div>
      <div class=" p1757742262 oy" style="height: calc(100vh - 45px - 142rpx);transition: 0.3s;" :style="{transform: `translateY(${translateY}px)`}">
        <div class="f  pl30 bfff pr30 pt30 pb30">
          <img class="p1757741319" :src="form.images && form.images.length && form.images[0]" alt="">
          <div class="p1757559797 pl30">
            <div class="w100  single-line fw500 fz30 ">{{form.store_name}}</div>
            <div class=" pt20  fz28" style="color: #666666">当前价 ¥ {{ form.price }}</div>
          </div>
        </div>
        <div class="fz34 pt30 pb30 pl30" style="color: #666666;">规格价格</div>
        <uv-form errorType="toast" labelWidth="200rpx" labelPosition="left" :labelStyle="{fontSize: '30rpx',color: '#666666'}" :model="skuObject" ref="skuObject" :rules="rules">
          <div class="mb20 bfff" v-for="(item, index) in skuObject.skus" :key="index">
            <div v-if="form.spec_type == 1" class="f p1757641432 pl30 pr30 pt30 pb30">
              <img class="p1757741291" :src="item.image" alt="">
              <div class="p1757559797 pl30">
                <div class="w100  single-line fw500 fz30 ">{{item.name}}</div>
                <div class=" pt10  fz28" style="color: #666666">当前价 ¥ {{ item._price }}</div>
              </div>
            </div>
            <div class="f p1757641432 pl30 pr30 pt30 pb30 aic">
              <uv-form-item label="改后售价" :prop="`skus.${index}.price`">
                <div :id="'skuObject-skus-price-' + index" @click.stop="openKeyboardTap(index, item.price, 'price')" class="p1757733431   f aic">
                  <!-- <uv-input fontSize="30rpx" readonly color="#333" border="none" v-model.trim="item.price" placeholder="请输入" placeholderStyle="color:#C9CACA;font-size:30rpx"></uv-input> -->
                  <div :class="!item.price && 'cD8D8D8'" class="p1757903903 pl20 w100 number-container">{{ item.price || '请输入' }}<div class="cursor-blink" v-if="currentId ==  'skuObject-skus-price-' + index">|</div>
                  </div>
                  <div class="fz30 f aic jcc p1757741587">元</div>
                </div>
              </uv-form-item>
            </div>
            <div class=" p1757641432  pl30 pr30 pt30 pb30 ">
              <uv-form-item label="改后划线价" :prop="`skus.${index}.market_price`">
                <div :id="'skuObject-skus-market_price-' + index" @click.stop="openKeyboardTap(index, item.market_price, 'market_price')" class="p1757733431  f aic">
                  <!-- <uv-input fontSize="30rpx" readonly color="#333" border="none" v-model.trim="item.market_price" placeholder="请输入" placeholderStyle="color:#C9CACA;font-size:30rpx"></uv-input> -->
                  <div :class="!item.market_price && 'cD8D8D8'" class="p1757903903 pl20 w100 number-container">{{ item.market_price || '请输入' }}<div class="cursor-blink" v-if="currentId ==  'skuObject-skus-market_price-' + index">|</div>
                  </div>
                  <div class="fz30 f aic jcc p1757741587">元</div>
                </div>
              </uv-form-item>
            </div>
          </div>
        </uv-form>

      </div>
      <div class="pb30 common-footer bfff f aic jcsb  pl30 pr30 p1757733046 pt30" style="height: 142rpx;overflow: hidden; box-sizing: border-box;">
        <button v-if="form.spec_type == 1" @click="batchModifyTap" class="p1757732970 common-button  fz34" style="height: 90rpx;">批量修改</button>
        <button @click="submitTap" class="p1757732979 common-button  fz34" style="height: 90rpx;">确认</button>
      </div>
      <div class="lh1 bfff">
        <uv-safe-bottom />
      </div>
      <uv-popup ref="skuPopup" mode="bottom" :closeOnClickOverlay="false">
        <div style="z-index: 1;" class="position-r p1757641432 bfff  f aic  jcc pb30 pt30">
          <div style="text-align: center;" class="w100 fz34">批量修改</div>
          <div @click="cancalTap" class="position-a" style="right: 30rpx;">
            <uv-icon size="40rpx" color="#9FA0A0" name="close"></uv-icon>
          </div>
        </div>
        <div :style="{transform: `translateY(${translatePopupY}px)`}" style="transition: 0.3s;">
          <div class="fz34 pt30 pl30 pb30" style="color: #666666;">统一修改价格</div>
          <div class="p1757640856 pb30">
            <div class="p1757641432 pl30 pr30 pt30 pb30 f aic">
              <div class="fz30 p1757640541" style="color: #666666;">售价</div>
              <div id="skuPopup-price-0" @click.stop="openKeyboardTap(0, price, 'price')" class="p1757733431  f aic">
                <!-- <uv-input fontSize="30rpx" readonly color="#333" border="none" v-model.trim="price" placeholder="请输入" placeholderStyle="color:#C9CACA;font-size:30rpx"></uv-input> -->
                <div :class="!price && 'cD8D8D8'" class="p1757903903 pl20 w100 number-container">{{ price || '请输入' }}<div class="cursor-blink" v-if="currentId ==  'skuPopup-price-0'">|</div>
                </div>
                <div class="fz30 f aic jcc p1757741587">元</div>
              </div>
            </div>
            <div class="f aic  pl30 pr30 pt30 pb30">
              <div class="fz30 p1757640541" style="color: #666666;">划线价</div>
              <div id="skuPopup-market_price-0" @click="openKeyboardTap(0, market_price, 'market_price')" class="p1757733431  f aic">
                <!-- <uv-input fontSize="30rpx" readonly color="#333" border="none" v-model.trim="market_price" placeholder="请输入" placeholderStyle="color:#C9CACA;font-size:30rpx"></uv-input> -->
                <div :class="!market_price && 'cD8D8D8'" class="p1757903903 pl20 w100 number-container">{{ market_price || '请输入' }}<div class="cursor-blink" v-if="currentId ==  'skuPopup-market_price-0'">|</div>
                </div>
                <div class="fz30 f aic jcc p1757741587">元</div>
              </div>
            </div>
          </div>
          <div class="p1757743049 mt30 pl30 pb30 pt30 pr30">
            <button @click="submitPopTap" class=" common-button  fz32">确认</button>
          </div>
        </div>
      </uv-popup>
      <div>
        <u-lst-keyboard :tooltip="false" mode="number" @close="keyboardClose" @change="keyboardConfirm" ref="keyboardRef" :text="tips"></u-lst-keyboard>
      </div>
    </div>
  </div>
</template>

<script>

import myLayOutVue from './components/layOut.vue'
import keyboardPopupVue from '@/components/Lkeyboard.vue'
import { detailGoods, setPrice } from "@/api/merchant.js";
import commonMixin from "./mixin/common.js";
import pageMixin from "./mixin/page.js";

export default {
  components: {
    'u-my-layOut': myLayOutVue,
    'u-lst-keyboard': keyboardPopupVue,
  },
  mixins: [commonMixin, pageMixin],
  data() {
    return {
      dotDisabled: true,
      translateY: 0,
      translatePopupY: 0,
      currentId: '',
      isBatchSet: false,
      isOpenPricePop: false,
      price: '',
      market_price: '',
      list: [],
      valueIndex: null,
      valueProp: '',
      tips: '',
      statusBarHeight: 0,
      routeQuery: {},
      form: {},
      rules: {},
      skuObject: {},
    }
  },


  onShow() {
    try {
      // #ifndef H5 || APP-PLUS
      this.statusBarHeight = uni.getWindowInfo().statusBarHeight || uni.getMenuButtonBoundingClientRect().top || 0;
      // #endif
    } catch (error) {
    }
  },
  onLoad(options) {
    if (options) this.routeQuery = options
    this.initPage()
  },
  methods: {
    initPage() {
      detailGoods(this.routeQuery.id).then(res => {
        if (res.code === 200) {
          if (res.result.spec_type == 0) {
            res.result.sku_object = {
              skus: [{ market_price: res.result.market_price && (Number(res.result.market_price) + ''), price: res.result.price && (Number(res.result.price) + '') }]
            }
          } else {
            res.result.sku_object.skus.forEach(item => {
              item.market_price = item.market_price && (Number(item.market_price) + '')
              item.price = item.price && (Number(item.price) + '')
              item._price = item.price
              item.name = item.spec_values.join(',')
            })
          }

          this.skuObject = res.result.sku_object
          this.form = res.result

          this.$nextTick(() => {
            this._initRules()
          })

        }
      })
    },
    submitTap() {

      this.$refs.skuObject.validate().then(res => {
        let data = JSON.parse(JSON.stringify(this.form))
        let form = {
          id: data.id,
          spec_type: data.spec_type
        }
        if (data.spec_type == 0) {
          form.market_price = this.skuObject.skus[0].market_price
          form.price = this.skuObject.skus[0].price
        } else {
          form.skus = this.skuObject.skus
        }
        uni.showLoading({ title: '请求中', mask: true })
        setPrice(form).then(res => {
          if (res.code === 200) {
            uni.$uv.toast('修改成功')
            this.initPage()
          }
        })
      })
    },
    // 弹框保存
    submitPopTap() {
      if (this.isBatchSet) {
        this.skuObject.skus.forEach((i, iI) => {
          i.price = this.price
          i.market_price = this.market_price
        })
      } else {
      }
      this.$refs.skuPopup.close()
      setTimeout(() => {
        this._clearPop()
      }, 400);

    },
    // 关闭弹框
    cancalTap() {
      this.$refs.skuPopup.close()
      setTimeout(() => {
        this._clearPop()
      }, 400);
    },
    keyboardClose() {
      this.translateY = 0
      this.tips = ''
      this.currentId = ''
      this.translatePopupY = 0
    },
    batchModifyTap() {
      this.isBatchSet = true
      this.isOpenPricePop = true
      this.$refs.skuPopup.open()
    },
    _initRules() {
      let rules = {}
      if (this.skuObject && this.skuObject.skus && this.skuObject.skus.length) {
        this.skuObject.skus.forEach((i, iI) => {
          rules[`skus.${iI}.price`] = { type: 'string', required: true, message: '请输入改后售价', trigger: ['blur', 'change'] }
          rules[`skus.${iI}.market_price`] = { type: 'string', required: true, message: '请输入改后划线价', trigger: ['blur', 'change'] }
        })
        this.rules = rules
      }
    },
    openKeyboardTap(valueIndex, tipsValue, prop) {
      this.tips = tipsValue
      this.valueProp = prop
      if (this.isOpenPricePop) {
        this.currentId = 'skuPopup-' + prop + '-' + valueIndex
      } else {
        this.valueIndex = valueIndex
        this.currentId = 'skuObject-skus-' + prop + '-' + valueIndex
      }
      this.$nextTick(() => {
        this.$refs.keyboardRef.open((keyboardHeight, keyboardTop) => {
          if (this.keyboardHeight == 0) this.keyboardHeight = keyboardHeight
          if (this.keyboardTop == 0) this.keyboardTop = keyboardTop
          uni.createSelectorQuery().in(this).select('#' + this.currentId).boundingClientRect(data => {
            if ((keyboardTop - keyboardHeight) < (data.top + data.height)) {
              if (this.isOpenPricePop) {
                this.translatePopupY = -(((data.top + data.height) - (keyboardTop - keyboardHeight)) + this.safeAreaInsetsBottom + 10)
              } else {
                this.translateY = -(((data.top + data.height) - (keyboardTop - keyboardHeight)) + this.safeAreaInsetsBottom + 10)
              }
            }
          }).exec();
        })
      })
    },
    keyboardConfirm(value) {
      if (this.isOpenPricePop) {
        this[this.valueProp] = value && String(value)
      } else {
        this.$set(this.skuObject.skus[this.valueIndex], this.valueProp, value && String(value))
      }
      // if (this.isOpenPricePop) {
      //   this.$set(this.specsPopList[this.valueIndex], this.valueProp, value)
      // } else {
      //   this.$set(this.skuObject.specsList[this.current].values[this.valueIndex], this.valueProp, value)
      // }
    },
    _clearPop() {
      this.isOpenPricePop = false
      this.isBatchSet = false
      this.valueIndex = null
      this.market_price = ''
      this.price = ''
    },
  }
}
</script>
<style>
page {
  background-color: #f7f8f8;
  color: #333;
}
</style>
<style lang="scss" scoped>
@import "./common.scss";
.p1757733046 {
  width: 100%;
  box-sizing: border-box;
  .p1757732979 {
    background: #de0012 !important;
    color: #fff !important;
    width: 100%;
  }
  .p1757732970 {
    width: 40% !important;
    min-width: 35% !important;
    border: 2rpx solid #e60012;
    color: #e60012 !important;
    margin-right: 30rpx !important;
  }

  .common-button {
    border-radius: 8rpx !important;
  }
}
.p1757743049 {
  .common-button {
    height: 90rpx;
    background: #de0012 !important;
    width: 100%;
    color: #fff !important;
    font-weight: 500;
    font-size: 36rpx !important;
    border-radius: 8rpx !important;
  }
}
.p1757641432 {
  border-bottom: 1rpx solid #f2f2f2;
}
.p1757640541 {
  width: 170rpx;
}
.p1757741291 {
  width: 90rpx;
  min-width: 90rpx;
  height: 90rpx;
  min-height: 90rpx;
  border-radius: 8rpx;
  overflow: hidden;
  border: 1rpx solid #e6e6e6;
}
.p1757741319 {
  width: 130rpx;
  height: 130rpx;
  border-radius: 8rpx;
  overflow: hidden;
  border: 1rpx solid #e6e6e6;
}
.p1757733431 {
  border-radius: 8rpx;
  border: 1rpx solid #cfcfcf;
  overflow: hidden;
  height: 55rpx;
  width: 300rpx;
  .p1757741587 {
    width: 57rpx;
    min-width: 57rpx;
    height: 100%;
    border-left: 1rpx solid #cfcfcf;
    background: #f7f7f7;
    margin-left: 20rpx;
  }
}
.p1757903903 {
  display: inline-block;
  font-size: 30rpx;
  overflow-x: auto;
  white-space: nowrap;
  width: 100%;
  cursor: pointer;
  pointer-events: auto;
}
</style>

